<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>系统用户列表</title>
    <jsp:include page="/WEB-INF/view/commons/css.jsp" />
</head>
<body >
<div id="main-container" class="container-fluid">
    <form action="sysuser/dolist" method="post" name="searchForm" id="searchForm" role="form" class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-1 control-label">部门：</label>
            <div class="col-md-4">
                <d:select clazz="selectpicker" list="${departments}" name="departmentId" selected="${searchEntity.departmentId}" ></d:select>
            </div>
            <label class="col-sm-1 control-label">关键字：</label>
            <div class="col-md-4">
                <div class="input-group">
                    <input type="text" class="form-control" name="keywords" value="${searchEntity.keywords}" placeholder="账号、姓名">
                    <div class="input-group-btn">
                        <button id="searchBtn" type="button" class="btn btn-sm btn-info"><i class="fa fa-search"></i> 搜索</button>
                    </div>
                </div>

            </div>
        </div>
    </form>
    <div class="row">
        <div class="col-md-10">
            <p>
                <shiro:hasPermission name="sysuser:add">
                    <button type="button" data-url="sysuser/create" class="btn btn-sm btn-success link_add" data-title="新增系统用户"><i class="fa fa-plus"></i> 新增</button>
                </shiro:hasPermission>
                <shiro:hasPermission name="sysuser:edit">
                    <button type="button" data-url="sysuser/edit" class="btn btn-sm btn-primary link_edit" data-title="编辑系统用户"><i class="fa fa-edit"></i> 修改</button>
                    <button id="user_role" type="button" class="btn btn-sm btn-primary" data-title="分配角色"><i class="fa fa-mail-forward"></i> 分配角色</button>
                </shiro:hasPermission>
                <shiro:hasPermission name="sysuser:delete">
                    <button type="button" data-url="sysuser/delete" class="btn btn-sm btn-danger link_del"><i class="fa fa-trash"></i> 删除</button>
                </shiro:hasPermission>
                <shiro:hasPermission name="sysuser:view">
                    <button type="button" data-url="sysuser/info" class="btn btn-sm link_info" data-title="系统用户详情"><i class="fa fa-book"></i> 详情</button>
                </shiro:hasPermission>
            </p>
        </div>
    </div>

    <table id="table_data" class="table table-striped table-bordered table-hover">
        <thead>
        <tr>
            <th class="center td-checkbox" width="5%">
                <label><input type="checkbox" class="check-all ace" data-tableid="table_data" /><span class="lbl"></span></label>
            </th>
            <th width="10%">部门</th>
            <th width="10%">账号</th>
            <th width="10%">姓名</th>
            <th width="15%">角色</th>
            <th width="10%">电话</th>
            <th width="10%">添加时间</th>
            <th width="10%">状态</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
<!-- 返回顶部  -->
<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
    <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
</a>
<!-- script start -->
<jsp:include page="/WEB-INF/view/commons/js.jsp" />
<script type="text/javascript">
    $(document).ready(function(e) {
        var table = $("#table_data").dataTable({
                ajax: function(data, callback, settings){
                    tableAjax($("#searchForm"),data, callback, settings);
                },
                //列表表头字段
                columns: [
                    mainConfig.checkboxColumn,
                    { "data": "departmentStr",name:"department_id",orderable:false },
                    { "data": "account",name:"account",orderable:false },
                    { "data": "name",name:"name",orderable:false },
                    { "data": "roleName",orderable:false },
                    { "data": "phone",name:"phone",orderable:false },
                    { "data": "addTimeStr",name:"add_time" },
                    { "data": "statusStr",name:"status",orderable:false }
            ]
        }).api();

        //查询条件
        $("#searchForm").submit(function(){
            table.ajax.reload();
            return false;
        });

        var roleHtml = template('panelRole',{});
        $('#user_role').click(function(){
            var users = $('#table_data tbody :checked');
            if(users.length < 1){
                layer.alert('请先选择一个用户');
                return;
            }
            //用户
            var userIdArr = [];
            users.each(function(){
                userIdArr.push(this.value);
            });

            var layerIndex = layer.open({
                title:"用户角色",
                type: 1,
                content: roleHtml,
                area: ['600px', '400px']
            });

            if(userIdArr.length == 1){
                $.getJSON("sysuser/info.json/"+ userIdArr[0],function(res){
                    if(res && res.success && res.data && res.data.roles){
                        var roles = res.data.roles;
                        $.each(roles, function(i, item){
                            $('#userRoles input[value=' + item.id +']')[0].checked=true;
                        });
                    }
                });
            }

            $('#btnSaveUserRole').click(function(){
                //角色
                var roleIdArr = [];
                $('#userRoles input:checked').each(function(){
                    roleIdArr.push(this.value);
                });
                if(roleIdArr.length < 1){
                    layer.alert('请选择至少一个角色');
                    return false;
                }

                $.ajax({
                    url: 'sysuser/createUserRole',
                    data:{userIds:userIdArr.join(','),roleIds:roleIdArr.join(',')},
                    type: "post",
                    dataType: "json",
                    success: function (data) {
                        layer.close(layerIndex);
                        if(data.msg){
                            layer.alert(data.msg);
                        }
                        $('#searchForm').submit();
                    }
                });
            });// end #btnSaveUserRole

        });


    });
</script>
<!-- script end -->
</body>
<script id="panelRole" type="text/html">
    <div class="panel panel-info">
        <div class="panel-body">
            <div id="userRoles" class="row checkbox-col-2">
                <d:checkbox list="${roles}" name="roleIds" ></d:checkbox>
            </div>
        </div>
        <div class="panel-footer">
            <button id="btnSaveUserRole" type="button" class="btn btn-sm btn-primary"><i class="fa fa-floppy-o"></i> 提交</button>
        </div>
    </div><!-- /.panel -->
</script>
</html>